@import "./utils/variables";
@import "./utils/mixins";

.page-menu-detail {
	margin-bottom : 52px;
	.img{
		width:100%;
	}

	.content {
		padding: 0 8% 8% 8%;
		margin-top: 16px;
		.title {
			text-align: center;
			font-size: 1.25rem;
			font-weight :bold;
		}
		.info {
			margin-top : 16px;
			text-align : center;
			.love {
				display: inline-block;
				margin-right:5%;
				font-size: $font-size-small;
				.icon-collection {
					color: #f61f1f;
					display: inline-block;
					font-size: $font-size-big;
					vertical-align :middle;
				}
				.num {
					display: inline-block;
					font-size: $font-size-small;
				}
			}
			.visible {
				display: inline-block;
				font-size: $font-size-small;
				vertical-align : middle;
				.icon-visible {
					display: inline-block;
					font-size: 1.5rem;
					vertical-align :middle;
				}
				.num {
					display: inline-block;
					font-size: $font-size-small;
				}
			}


		}

		.des{
			margin-top: 16px;
			line-height :150%;
			font-size:1.1rem;
		  	text-align: center;
		}
		.collect{
			margin-top: 16px;
			text-align :center;
			div {
				display :inline-block;
				border-radius : 9px;
				width: 33%;
				padding: 3% 0;
				&.like {
					background-color:#feeeee;
					color: #e74747;
					margin-right:11%
					&.active {
						background-color: #ededed;
    					color: #999;
					}
				}
				&.join {
					background-color:#e3ffdf;
					color: #1f5b2e;
					&.active {
						background-color: #ededed;
    					color: #999;
					}
				}
			}

		}

		.material {
			.title {
				text-align: center;
				font-size: 1.25rem;
				font-weight :bold;
				margin: 16px auto;
			}
			.items {
				width: 100%;
				font-size: 0;
				.item {
					padding: 16px;
					width: 50%;
					font-size: $font-size-big;
					display: inline-block;
					text-align : center;
					border-top:1px solid $color-gray;
					border-bottom:1px solid $color-gray;
					&:nth-child(odd) {
						border-right:1px solid $color-gray;
					}
				}
			}
		}

		.pcontent {
			margin-top 24px;
			p {
				line-height: 160%;
			}
			img {
				width: 100%;
			}
		}
	}
}